import React, {
  useEffect,
  forwardRef,
  useImperativeHandle,
  useMemo,
  useState,
} from "react";
import { Form, Button, Input } from "antd-mobile";
import { useDispatch } from "react-redux";
import { register } from "store/Lzk_Store/Patint";

const Perfectmessagethree = (
  {
    btn,
    buffer,
  }: {
    btn: (key: "one" | "two" | "three") => void;
    buffer: any;
  },
  ref: any
) => {
  const [form] = Form.useForm();
  const dispatch = useDispatch<any>();

  const echo = useMemo(
    () => ({
      personalProfile: buffer.personalProfile,
      goodField: buffer.goodField,
    }),
    [buffer.personalProfile, buffer.goodField]
  );

  useImperativeHandle(ref, () => {
    return {
      validateFields: form.validateFields,
    };
  });

  const settle = () => {
    form.validateFields().then((res) => {
      const data = { ...buffer, ...res };
      dispatch(register(data));
    });
  };

  useEffect(() => {
    form.setFieldsValue(echo);
  }, [form, echo]);

  return (
    <div className="Perfectmessagethree">
      <Form form={form}>
        <div>个人简历</div>
        <Form.Item name={"personalProfile"}>
          <Input placeholder="个人简历" />
        </Form.Item>
        <div>删除领域</div>
        <Form.Item name={"goodField"}>
          <Input placeholder="删除领域" />
        </Form.Item>
      </Form>

      <Button onClick={settle}>申请入驻</Button>
    </div>
  );
};
export default forwardRef(Perfectmessagethree);
